<template>
	<view class="container">
		<view class="tabs">
			<view :class="['tab', currentTab === 0 ? 'active' : '']" @click="switchTab(0)">
				热门话题
			</view>
			<view :class="['tab', currentTab === 1 ? 'active' : '']" @click="switchTab(1)">
				其他版块
			</view>
		</view>
		<view class="content">
			<view v-if="currentTab === 0">
				<view class="item" v-for="(item, index) in items[currentTab]" :key="index">
					<view class="post">
						<view class="user-info">
							<image :src="item.user.avatar" class="avatar"></image>
							<view class="user-details">
								<view class="username">{{ item.user.username }}</view>
								<view class="popularity">热度: {{ item.user.popularity }}</view>
							</view>
						</view>
						<view class="post-content">
							<view class="title">{{ item.title }}</view>
							<view class="description">{{ item.description }}</view>
							<view class="images">
								<image v-for="(img, imgIndex) in item.images" :key="imgIndex" :src="img" class="image">
								</image>
							</view>
							<view class="actions">
								<view @click="likeItem(currentTab, index)" class="action">
									<!-- <view class="iconfont icon-fav"></view> -->
									<u-icon name="heart-fill" color="red" size="18"  ></u-icon>
									<view> {{ item.likes }}</view>
								</view>
								<view @click="replyItem(currentTab, index)" class="action">
									<!-- <view class="iconfont icon-reply"></view> -->
									<u-icon name="chat-fill" color="green" size="18"  ></u-icon>
									<view>{{ item.replies }}</view>
								</view>
								<view @click="collectItem(currentTab, index)" class="action">
									<!-- <text class="icon">&#x2606;</text> -->
									<!-- <view class="iconfont icon-star"></view> -->
									<u-icon name="star-fill" color="orange" size="18"  ></u-icon>
									<view>
										{{ item.collects }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="currentTab === 1">
				<view class="item" v-for="(item, index) in items[currentTab]" :key="index">
					<view class="post">
						<view class="user-info">
							<image :src="item.user.avatar" class="avatar"></image>
							<view class="user-details">
								<view class="username">{{ item.user.username }}</view>
								<view class="popularity">热度: {{ item.user.popularity }}</view>
							</view>
						</view>
						<view class="post-content">
							<view class="title">{{ item.title }} 其他版块</view>
							<view class="description">{{ item.description }}</view>
							<view class="images">
								<image v-for="(img, imgIndex) in item.images" :key="imgIndex" :src="img" class="image">
								</image>
							</view>
							<view class="actions">
								<view @click="likeItem(currentTab, index)" class="action">
									<!-- <view class="iconfont icon-fav"></view> -->
									<u-icon name="heart-fill" color="red" size="18"  ></u-icon>
									<view> {{ item.likes }}</view>
								</view>
								<view @click="replyItem(currentTab, index)" class="action">
									<!-- <view class="iconfont icon-reply"></view> -->
									<u-icon name="chat-fill" color="green" size="18"  ></u-icon>
									<view>{{ item.replies }}</view>
								</view>
								<view @click="collectItem(currentTab, index)" class="action">
									<!-- <text class="icon">&#x2606;</text> -->
									<!-- <view class="iconfont icon-star"></view> -->
									<u-icon name="star-fill" color="orange" size="18"  ></u-icon>
									<view>
										{{ item.collects }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 0,
				items: [
					[{
							user: {
								avatar: '/static/avatars/1.jpg',
								username: '用户A',
								popularity: 98
							},
							title: '中国人的健康出现如此巨大的问题,原因到底是什么?',
							description: '中国医学界专家给不出答案,只是勉强说了二句: ...',
							images: [
								'/static/images/1.png',
								'/static/images/2.png',
								'/static/images/3.png'
							].sort(() => Math.random() - 0.5).slice(0, 3),
							likes: 145,
							replies: 145,
							collects: 145
						},
						{
							user: {
								avatar: '/static/avatars/2.jpg',
								username: '用户B',
								popularity: 76
							},
							title: '社会热点：如何看待未来人工智能的发展？',
							description: '人工智能技术越来越普及，给社会带来了哪些影响？',
							images: [
								'/static/images/1.png',
								'/static/images/2.png',
								'/static/images/3.png'
							].sort(() => Math.random() - 0.5).slice(0, 3),
							likes: 98,
							replies: 76,
							collects: 102
						},
						{
							user: {
								avatar: '/static/avatars/3.jpg',
								username: '用户C',
								popularity: 88
							},
							title: '科技前沿：量子计算的现实应用场景探讨',
							description: '量子计算技术的发展已经到了哪个阶段？未来会如何应用到实际场景中？',
							images: [
								'/static/images/1.png',
								'/static/images/2.png',
								'/static/images/3.png'
							].sort(() => Math.random() - 0.5).slice(0, 3),
							likes: 120,
							replies: 88,
							collects: 90
						},
						{
							user: {
								avatar: '/static/avatars/4.jpg',
								username: '用户D',
								popularity: 65
							},
							title: '环保话题：如何在日常生活中减少塑料使用？',
							description: '塑料污染对环境造成了哪些影响？我们应该如何应对？',
							images: [
								'/static/images/1.png',
								'/static/images/2.png',
								'/static/images/3.png'
							].sort(() => Math.random() - 0.5).slice(0, 3),
							likes: 87,
							replies: 54,
							collects: 72
						},
						{
							user: {
								avatar: '/static/avatars/5.jpg',
								username: '用户E',
								popularity: 72
							},
							title: '教育焦点：线上教育的优势与挑战',
							description: '在线教育正在成为教育领域的重要发展方向，但面临哪些挑战？',
							images: [
								'/static/images/1.png',
								'/static/images/2.png',
								'/static/images/3.png'
							].sort(() => Math.random() - 0.5).slice(0, 3),
							likes: 93,
							replies: 63,
							collects: 82
						}
					],
					[{
							user: {
								avatar: '/static/avatars/2.png',
								username: '铁柱',
								popularity: 81
							},
							title: '时事观察：全球经济复苏的现状与展望',
							description: '全球经济在新冠疫情后的复苏步伐如何？未来的经济趋势如何预测？',
							images: [
								'/static/images/1.png',
								'/static/images/2.png',
								'/static/images/3.png'
							].sort(() => Math.random() - 0.5).slice(0, 3),
							likes: 105,
							replies: 79,
							collects: 88
						},
						{
							user: {
								avatar: '/static/avatars/7.jpg',
								username: '用户G',
								popularity: 70
							},
							title: '文化交流：电影艺术对世界文化的影响',
							description: '电影作为文化交流的一种重要形式，如何影响和塑造了世界各国的文化？',
							images: [
								'/static/images/1.png',
								'/static/images/2.png',
								'/static/images/3.png'
							].sort(() => Math.random() - 0.5).slice(0, 3),
							likes: 88,
							replies: 62,
							collects: 79
						}
					]
				]
			};
		},
		methods: {
			switchTab(index) {
				this.currentTab = index;
			},
			likeItem(tabIndex, index) {
				this.items[tabIndex][index].likes++;
			},
			replyItem(tabIndex, index) {
				// 实现回复逻辑
				this.items[tabIndex][index].replies++;
				this.$modal.loading("登录中，请耐心等待...")
				//alert('回复功能尚未实现。');
				this.$modal.msgError("回复功能尚未实现 敬请期待")
			},
			collectItem(tabIndex, index) {
				this.items[tabIndex][index].collects++;
			}
		}
	};
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
	}

	.icon-fav {
		color: red;
	}

	.tabs {
		display: flex;
		justify-content: space-around;
		background-color: #f5f5f5;
	}

	.tab {
		padding: 10px 20px;
		cursor: pointer;
	}

	.tab.active {
		border-bottom: 2px solid #000;
		font-weight: bold;
	}

	.content {
		padding: 0px;
	}

	.item {
		background-color: #fff;
		border-bottom: 1px solid #ccc;
		padding: 20px;
	}

	.post {
		display: flex;
		flex-direction: column;
		/* 将帖子内容垂直排列 */
		margin-bottom: 10px;
		/* 调整帖子之间的间距 */
	}

	.user-info {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		/* 调整用户信息与帖子内容之间的间距 */
	}

	.avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background-color: #ccc;
	}

	.user-details {
		margin-left: 10px;
		display: flex;
		flex-direction: column;
	}

	.username {
		font-weight: bold;
	}

	.popularity {
		color: #666;
		font-size: 12px;
	}

	.post-content {
		margin-left: 0px;
		/* 调整帖子内容的左边距 */
	}

	.title {
		font-size: 18px;
		font-weight: bold;
	}

	.description {
		margin-top: 10px;
		font-size: 14px;
	}

	.images {
		display: flex;
		justify-content: space-around;
		margin-top: 10px;
	}

	.image {
		width: 100px;
		height: 100px;
	}

	.actions {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		/* 将操作按钮右对齐 */
		width: 100%;
		/* 充满父容器宽度 */
		margin-top: 8px;
	}

	.action {
		margin-left: 10px;
		display: flex;
		align-items: center;
		cursor: pointer;
	}

	.icon {
		font-size: 20px;
		margin-right: 5px;
	}
</style>